import React, { Component } from 'react';
import { Col,Radio,Row } from 'antd';

import './ConfigChoice.less';

export default class ConfigChoice extends Component {
  constructor(props) {
    super(props);
    this.state = {
        data:this.props.data,
        selectval: this.props.data.btn[0].desc,
    };
  }

  handleSizeChange = (e) => {
      this.setState({ selectval: e.target.value });
      this.props.selectCallback(this.props.model,"choice",e.target.value);
  };

  render() {
    const { selectval } = this.state;
    return (
        <div className="choice-body">
          <Row className="row-body">
            <Col className="child-title" span={24}>
                <p>{this.state.data.title}</p>
            </Col>
            <Col className="child-content" span={24}>
                <Radio.Group className="radio-groupo" value={selectval} onChange={this.handleSizeChange}>{
                    this.state.data.btn.map(function(val,index){
                        return  <Radio.Button key={index} value={val.desc}>{val.content}</Radio.Button>
                    })}
                </Radio.Group>
                <p>不同地域之间的产品内网不互通，订购后不支持更换地域，请谨慎选择。</p>
            </Col>
          </Row>
        </div>
    );
  }
}